<!DOCTYPE html>
<html ng-app="App">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>轮播图设置</title>

    <script src="__STATIC__/html/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="__STATIC__/html/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="__STATIC__/html/js/angular.min.js" type="text/javascript"></script>
    <script src="__STATIC__/html/js/catalog.js" type="text/javascript"></script>
    <script src="__STATIC__/teacher/js/webuploader.js" type="text/javascript"></script>

    <link href="__STATIC__/html/css/bootstrap.min.css" rel="stylesheet">
    <link href="__STATIC__/teacher/css/webuploader.css" rel="stylesheet">
    <link href="__STATIC__/html/css/style.css" rel="stylesheet">
    <style type="text/css">
        a,
        .pagination>li>a {
            color: #1abc9c;
        }
        
        .col-md-4 {
            padding-right: 0px;
        }
        
        .help-block {
            display: inline-block;
            margin: 0px;
        }
        .reshow{
            display: none;
        }
    </style>
</head>

<body class="reshow" ng-controller="Aaa">
    <div class="container-fluid" style="padding:20px 30px;">
        <div class="row" style="margin: 20px 0px">
            <div class="col-md-12">
                <!--dom结构部分-->
                <div id="excelbutton" style="z-index: 999; position: absolute;top:0px;left:10px;width: 93px;height: 40px;background-color: white"></div>
                <div id="uploader-demo">
                    <!--用来存放item-->
                    <div id="fileList" class="uploader-list"></div>
                    <div id="filePicker">选择图片</div>
                </div>
            </div>
        </div>
        <div class="row" ng-show="mainshow">
            <div style="margin: 25px 0px" class="col-md-3" ng-repeat="item in slider track by $index">
                <div style="height:100px;overflow: hidden">
                    <img ng-src="\res\thumb\{{item.ThumbPath}}">
                </div>
                <div style="margin: 5px 10px">
                    <button style="margin: 5px 3px" type="button" class="btn btn-primary" ng-if="item.OnShow==0" ng-click="setsliders(item)" data-toggle="modal" data-target="#myslider">设为轮播</button>
                    <button style="margin: 5px 3px" type="button" class="btn btn-primary" ng-if="item.OnShow==1" ng-click="setsliders(item)" data-toggle="modal" data-target="#myslider">取消轮播</button>
                    <button style="margin: 5px 3px" type="button" class="btn btn-primary" ng-click="delete(item)" data-toggle="modal" data-target="#myModal">删除图片</button>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">删除</h4>
                    </div>
                    <div class="modal-body">确认删除这张图片？</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">否</button>
                        <button type="button" class="btn btn-primary" ng-click="deletereal()" data-dismiss="modal">是</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="myslider" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="mysliderLabel">设为轮播</h4>
                    </div>
                    <div class="modal-body">确认将这张图片{{delitem.OnShow==0?'设为':'取消'}}轮播？</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">否</button>
                        <button type="button" class="btn btn-primary" ng-click="realsetSliders()" data-dismiss="modal">是</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="ModalOK" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel1">提示</h4>
                    </div>
                    <div class="modal-body">
                        提交成功
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--过度动画-->
    <div class="row" style="margin-top:20px;margin-bottom:20px;" ng-show='animateshow'>
        <div class="loader">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>

    <script type="text/javascript">

        $(document).ready(function(){
            $(".reshow").each(function(){
                $(this).css({"display":"block"});
            })
        });

        var app = angular.module('App', []);
        app.controller('Aaa', ['$scope', '$http', "$timeout",function($scope, $http, $timeout) {

            jQuery(function() {
                var $ = jQuery,
                    uploader;

                // 初始化Web Uploader
                uploader = WebUploader.create({

                    // 自动上传。
                    auto: true,

                    // swf文件路径
                    swf: '__STATIC__/teacher/js/Uploader.swf',

                    // 文件接收服务端。
                    server: '/base/Slider/upload',

                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#filePicker',

                    // 只允许选择文件，可选。
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    }
                });

                // 完成上传完了，成功或者失败，先删除进度条。
                uploader.on( 'uploadComplete', function( file ) {
                    $( '#'+file.id ).find('.progress').remove();
                    $('#ModalOK').modal('show');
                    $timeout(function() {
                        $('#ModalOK').modal('hide');
                    }, 1500);
                    $scope.reset();
                });
            });



            $scope.url = "/";

            $scope.reset = function() {
                $scope.animateshow=true;
                $scope.mainshow = false;
                $scope.slider = {};
                $http({
                    method: "get",
                    url: $scope.url + "slider"
                }).then(function(data) {
                    $scope.slider = data.data.data;
                    $timeout(function () {
                        $scope.animateshow=false;
                        $scope.mainshow = true;
                        $("#excelbutton").hide();
                    },1000)
                })
            }
            $scope.reset();


            $scope.delitem = {}; //删除的数据
            $scope.deleterealname = "";
            //点击删除按钮
            $scope.delete = function(item) {
                $scope.delitem = item;
            }

            //点击“是”确认删除
            $scope.deletereal = function() {
                $http({
                    method: "delete",
                    url: $scope.url+ "slider/" + $scope.delitem.Id,
                }).then(function(data) {
                    $('#ModalOK').modal('show');
                    $timeout(function() {
                        $('#ModalOK').modal('hide');
                    }, 1500);
                    $scope.reset();
                })
            }


            $scope.setsliders = function(item){
                $scope.delitem = item;
            }

            //设为轮播
            $scope.realsetSliders = function(){
                $http({
                    method: "get",
                    url: $scope.url+ "base/Slider/setSlider?id=" + $scope.delitem.Id,
                }).then(function(data) {
                    if(data.data.message=='only5'){
                        alert('最多设置5张轮播图！')
                    }else{
                        $('#ModalOK').modal('show');
                        $timeout(function() {
                            $('#ModalOK').modal('hide');
                        }, 1500);
                        $scope.reset();
                    }
                })
            }
        }]);


    </script>
</body>

</html>